<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        v-model="searchParams"
        :btnList="btnList"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :tableData="tableData"
        :tableColumn="tableColumn"
        :total="totalNum"
        requestName="searchHandle"
        @export="exprotHandle"
        @rowView="operateHandle($event, 'rowView')"
        @rowEdit="operateHandle($event, 'rowEdit')"
        @reset-back="resetBackHandle"
      />
    </div>
    <TrDetail
      v-model="isShowDetailPopup"
      :leftList="detailList"
      statusModel="hidden"
      :detailData="detailData"
      :width="1227"
      :labelWidth="102"
      :isNeedFooter="false"
      @confrim="activeName = 'first'"
    >
      <template #bomTable>
        <el-tabs v-model="activeName" class="mg-tp--8">
          <el-tab-pane label="工单BOM" name="first">
            <TrTable
              v-if="activeName == 'first'"
              isPopup
              isNeedIndex
              v-model="bomSearchParams"
              :tableData="bomTableData"
              :total="bomTotal"
              :tableColumn="bomTableColumn"
              requestName="getBomListHandle"
            />
          </el-tab-pane>
          <el-tab-pane label="工单日志" name="second">
            <TrTable
              v-if="activeName == 'second'"
              isPopup
              isNeedIndex
              v-model="logSearchParams"
              :total="logTotal"
              :tableData="logTableData"
              :tableColumn="logTableColumn"
              requestName="getLogListHandle"
            />
          </el-tab-pane>
        </el-tabs>
      </template>
    </TrDetail>
    <TrForm
      v-model="isShowEdit"
      title="编辑"
      :valueObj.sync="formData"
      :list="formList"
      :width="480"
      @close="isShowEdit = false"
      @confrim="confrimHandle"
    />
  </div>
</template>

<script>
import {
  getOrderList,
  getBomList,
  getLogList,
  updateRoute,
} from "@/api/production/workOrderManage";
import { getColor } from "@/utils/billColor";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrDetail from "@/components/Tr-detail/Tr-detail.vue";
import TrForm from "@/components/Tr-form/Tr-form-popup.vue";
import moment from "moment";
export default {
  name: "workOrderManage",
  components: {
    TrTable,
    TrDetail,
    TrForm,
  },
  data: () => ({
    isShowEdit: false,
    formData: {},
    formList: [
      {
        label: "工艺路线",
        type: "loadselect",
        width: 100,
        selectedLabel: "",
        requestObj: {
          url: "/api/mes-production-service/craft-route/page",
          method: "post",
          searchKey: "craft",
          rlLabel: "name",
          rlValue: "id",
          resultKey: "data,data,records",
        },
        defaultParams: {},
        value: "",
        id: "craftRouteId",
      },
    ],
    btnList: [
      {
        label: "导出",
        option: "export",
        color: "blue",
      },
    ],
    isShowUpload: true,
    bomSearchParams: {
      current: 1,
      size: 10,
      workOrderId: "",
    },
    bomTotal: 0,
    bomTableColumn: [
      {
        type: "text",
        label: "原料料号",
        value: "materialCode",
      },
      {
        type: "text",
        label: "物料名称",
        value: "materialName",
      },
      {
        type: "text",
        label: "物料规格",
        value: "materialSpec",
      },
      {
        type: "text",
        label: "需求数量",
        value: "requireNum",
      },
      {
        type: "text",
        label: "数量单位",
        value: "newNumUnit",
      },
      {
        type: "text",
        label: "需求重量",
        value: "requireWeight",
      },
      {
        type: "text",
        label: "重量单位",
        value: "newWeightUnit",
      },
    ],
    bomTableData: [],
    logSearchParams: {
      current: 1,
      size: 10,
      workOrderId: "",
    },
    logTotal: 0,
    logTableColumn: [
      {
        type: "text",
        label: "变更时间",
        value: "changeTime",
      },
      {
        type: "text",
        label: "变更人员",
        value: "changeErpName",
      },
      {
        type: "text",
        label: "变更内容描述",
        value: "changeContent",
      },
    ],
    logTableData: [],
    activeName: "first",
    isShowDetailPopup: false,
    detailList: [
      {
        type: "text",
        id: 1,
        label: "基础信息",
        list: [
          {
            text: "工单号",
            id: "workOrderCode",
            width: 33.33,
          },
          {
            text: "工艺路线",
            id: "flowName",
            width: 33.33,
          },
          {
            text: "成品料号",
            id: "materialCode",
            width: 33.33,
          },
          {
            text: "成品名称",
            id: "materialName",
            width: 33.33,
          },
          {
            text: "计划数量",
            id: "planNum",
            width: 33.33,
          },
          {
            text: "已完工数量",
            id: "completeNum",
            width: 33.33,
          },
          {
            text: "计划开工日期",
            id: "planStartTime",
            width: 33.33,
          },
          {
            text: "生产车间",
            id: "productionWorkShop",
            width: 33.33,
          },
          {
            text: "工单状态",
            id: "statusName",
            width: 33.33,
          },
          {
            text: "实际开工日期",
            id: "actualStartTime",
            width: 33.33,
          },
        ],
      },
      {
        type: "slot",
        slotName: "bomTable",
        label: "操作信息",
      },
    ],
    detailData: {},
    totalNum: 0,
    tableData: [],
    searchParams: {
      current: 1,
      size: 10,
      workOrderCode: "",
      materialCode: "",
      materialName: "",
      state: "",
    },
    searchShowList: [
      {
        label: "工单号",
        type: "input",
        width: 33.3,
        value: "",
        id: "workOrderCode",
      },
      {
        label: "成品料号",
        type: "input",
        width: 33.3,
        value: "",
        id: "materialCode",
      },
      {
        label: "成品名称",
        type: "input",
        width: 33.3,
        value: "",
        id: "materialName",
      },
    ],
    searchHideList: [
      {
        label: "工单状态",
        type: "multiSelect",
        width: 33.3,
        value: "",
        list: [],
        id: "stateList",
      },
      {
        width: 33.3,
      },
      {
        startStr: "planStartTimeEnd",
        endStr: "planStartTimeStart",
        id: "start",
        type: "daterange",
        width: 80,
        label: "计划开始日期",
        value: [],
        timePeriod: true,
        radio: -1,
      },
      {
        startStr: "planEndTimeStart",
        endStr: "planEndTimeEnd",
        id: "end",
        type: "daterange",
        width: 80,
        label: "计划完工日期",
        value: [],
        timePeriod: true,
        radio: -1,
      },
    ],
    tableColumn: [
      {
        type: "text",
        label: "工单号",
        value: "workOrderCode",
      },
      {
        type: "text",
        label: "单据类型",
        value: "workOrderTypeName",
      },
      {
        type: "text",
        label: "工艺路线",
        value: "flowName",
      },
      {
        type: "text",
        label: "工单状态",
        value: "statusName",
      },
      {
        type: "text",
        label: "成品料号",
        value: "materialCode",
      },
      {
        type: "text",
        label: "成品名称",
        value: "materialName",
      },
      {
        type: "text",
        label: "计划数量",
        value: "planNum",
      },
      {
        type: "text",
        label: "已完工数量",
        value: "completeNum",
      },
      // {
      //   type: "text",
      //   label: "合格数量",
      //   value: "quantityNum",
      // },
      {
        type: "text",
        label: "报废数量",
        value: "scrapNum",
      },
      {
        type: "text",
        label: "单位",
        value: "newNumUnit",
      },
      {
        type: "text",
        label: "计划开工日期",
        value: "planStartTime",
      },
      {
        type: "text",
        label: "计划完工日期",
        value: "planEndTime",
      },
      {
        type: "text",
        label: "实际开工日期",
        value: "actualStartTime",
      },
      {
        type: "text",
        label: "实际完工日期",
        value: "actualEndTime",
      },
      {
        type: "text",
        label: "生产车间",
        value: "productionWorkShop",
      },
      {
        type: "text",
        label: "创建人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "创建时间",
        value: "createTime",
      },
      {
        type: "text",
        label: "更新人员",
        value: "updateUserName",
      },
      {
        type: "text",
        label: "更新时间",
        value: "updateTime",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 120,
        showBtnList: [
          {
            label: "查看",
            option: "rowView",
          },
          {
            label: "编辑",
            option: "rowEdit",
          },
        ],
      },
    ],
  }),
  methods: {
    async confrimHandle() {
      let res = await updateRoute(this.formData);
      if (res.data.code != 200) return this.$message.error(res.data.msg);
      this.isShowEdit = false;
      this.$message.success(this.$t("msg.success"));
      this.searchHandle();
    },
    exprotHandle() {
      this.$exportHandle({ vm: this, params: this.searchParams });
    },
    getBomListHandle() {
      getBomList(this.bomSearchParams).then((res) => {
        if (res.data.code != 200) return;
        let data = res.data.data;
        this.$validateData(data);
        this.bomTotal = data.total;
        // this.bomTableData = data.records;
      });
    },
    getLogListHandle() {
      getLogList(this.logSearchParams).then((res) => {
        if (res.data.code != 200) return;
        let data = res.data.data;
        this.$validateData(data);
        this.logTotal = data.total;
        this.logTableData = data.records;
      });
    },
    async operateHandle(val, type) {
      if (type == "rowEdit") {
        this.formData.workOrderId = val.id;
        const hCol = this.$findByProperty(this.formList, "id", "craftRouteId");
        let params = {
          validVersion: 1,
          materialId: val.materialId,
          currentTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        };
        hCol.selectedLabel =
          val.flowRouteId && val.flowRouteId != "-" ? val.flowName : "";
        hCol.value =
          val.flowRouteId && val.flowRouteId != "-" ? val.flowRouteId : "";
        this.$set(hCol, "defaultParams", params);
        this.isShowEdit = true;
        return;
      }
      this.detailData = val;
      const col = this.$findByProperty(
        this.detailList,
        "id",
        "statusName",
        "list"
      );
      col.valueColor = getColor("DFT", val.state);
      this.bomSearchParams.workOrderId = val.id;
      this.logSearchParams.workOrderId = val.id;
      let bomRes = await getBomList(this.bomSearchParams);
      let logRes = await getLogList(this.logSearchParams);
      if (bomRes.data.code !== 200) return;
      if (logRes.data.code !== 200) return;
      let bomData = bomRes.data.data;
      let logData = logRes.data.data;
      this.$validateData(bomData);
      this.$validateData(logData);
      this.bomTableData = bomData.records;
      this.bomTableData.forEach((item) => {
        item.newNumUnit = `${item.requireNumUnitCode}(${item.requireNumUnitName})`;
        item.newWeightUnit = `${item.requireWeightUnitCode}(${item.requireWeightUnitName})`;
      });
      this.bomTotal = bomData.total;
      this.logTableData = logData.records;
      this.logTotal = logData.total;
      this.isShowDetailPopup = true;
    },
    getListHandle(params) {
      getOrderList(params).then((res) => {
        if (res.data.code != 200) return;
        let data = res.data.data;
        this.$validateData(data);
        this.totalNum = data.total;
        this.tableData = data.records;
        this.tableData.forEach((item) => {
          item["statusNameColor"] = getColor("DFT", item.state);
          item["isShowrowEdit"] = item.state != 10;
          item.newNumUnit = `${item.unitCode}(${item.unitName})`;
        });
      });
    },
    searchHandle() {
      this.getListHandle(this.searchParams);
    },
    async initHandle() {
      const res = await this.$fetchEnumApi("mes-production-service", [
        "workOrderStatus",
      ]);
      const hCol = this.$findByProperty(this.searchHideList, "id", "stateList");
      this.$set(hCol, "list", res["workOrderStatus"]);
    },
    resetBackHandle() {
      let code = this.$route.query.workOrderCode;
      if (code) {
        this.searchShowList[0].value = code;
        this.searchParams.workOrderCode = code;
      }
    },
  },
  created() {
    this.resetBackHandle();
    this.initHandle();
    this.searchHandle();
  },
};
</script>

<style></style>
